
import { Alert, App, Breadcrumb, Button, Card, Space } from "antd";
import Search from "../../../../components/Search";
import Sheet from "../../../../components/Sheet";
import { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import BtnTool from "@/components/BtnTool";
import { useDispatch } from "react-redux";
import { setShowBtnTool } from "@/store/modules/style";
import State from "@/components/State";
// import { sysUserAPI, sysUserDelFewAPI, sysUserSearchAPI } from "@/apis";
import dayjs from "dayjs";


export default function UserControlList() {
  const columns = [
    {
      title: '用户名',
      dataIndex: 'USERNAME',
      render: (dom, rowData, index) => {
        return <a onClick={() => navigate(`/usercontrol/new`)}>{rowData.USERNAME ? rowData.USERNAME : '-'}</a>
      },
    },
    {
      title: '昵称',
      dataIndex: 'NICKNAME'
    },
    // {
    //   title: '密码',
    //   dataIndex: 'PASSWORD'
    // },
    {
      title: '账户状态',
      dataIndex: 'STATUS',
      render: (text) => <State text={text} />
    },
    {
      title: '创建时间',
      dataIndex: 'CREATE_TIME',
      sorter: (a, b) => dayjs(a.CREATE_TIME).valueOf() - dayjs(b.CREATE_TIME).valueOf(),
    }
  ]
  const [page, setPage] = useState({ pageNum: 1, pageSize: 10 })
  const [dataSource, setDataSource] = useState({total: 20,
    data: Array.from({
        length: 46,
    }).map((_, i) => ({
        key: i,
        USERNAME: 'zhangsan',
        NICKNAME: `章三`,
        STATUS: '正常',
        CREATE_TIME: dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss'),
    }))})
  const navigate = useNavigate()
  const dispatch = useDispatch()
  const { message } = App.useApp()
  const [searchVal, setSearchVal] = useState('')
  const handleSearch = (val) => {
    setSearchVal(val)
    setPage({
      ...page,
      pageNum: 1
    })
  }
  const searchData = () => {
    // sysUserSearchAPI({
    //   condition: searchVal,
    //   ...page
    // }).then(res => {
    //   const _data = res.data.data.map(item => ({
    //     ...item,
    //     STATUS: item.STATUS === 1 ? '正常' : '锁定'
    //   }))
    //   setDataSource({
    //     ...res.data,
    //     data: _data
    //   })
    // })
  }

  const getData = () => {
    // sysUserAPI(page).then(res => {
    //   const _data = res.data.data.map(item => ({
    //     ...item,
    //     STATUS: item.STATUS === 1 ? '正常' : '锁定'
    //   }))
    //   setDataSource({
    //     ...res.data,
    //     data: _data
    //   })
    // })
  }
  // useEffect(() => {
  //   !searchVal && getData()
  //   searchVal && searchData()
  // }, [page, searchVal])
  // 分页
  const handlePage = (pageNum, pageSize) => {
    setPage({
      pageNum,
      pageSize
    })
  }
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
  // 表格选择
  const handleSelChange = (selectedRowKeys, selectedRows) => {
    // console.log(selectedRowKeys, selectedRows)
    setSelectedRowKeys(selectedRowKeys)
    dispatch(setShowBtnTool(selectedRowKeys.length > 0))
  }
  const rowSelection = {
    selectedRowKeys,
    onChange: handleSelChange,
  };
  const handleAdd = () => {
    // 跳转至新页面
    navigate('/usercontrol/new')
  }
  const handleDel = () => {
    // 删除接口
    // sysUserDelFewAPI({
    //   ids: selectedRowKeys
    // }).then(res => {
    //   message.open({
    //     type: res.code === 200 ? 'success' : 'error',
    //     content: res.message
    //   })
    //   if (res.code === 200) {
    //     getData()
    //     setSelectedRowKeys([])
    //   }
    // })
  }
  return (
    <div>
      <h2 className="headline">用户管理</h2>
      <Space direction="vertical" size={16} style={{ width: "100%" }}>
        <Search onSearch={handleSearch}></Search>
        <Card>
          <div className="tableHeader">
            <h3>用户表</h3>
            <div>
              <Button type="primary" onClick={handleAdd}>新建</Button>
            </div>
          </div>
          {selectedRowKeys.length > 0 && <Alert style={{
            marginTop: 16,
            background: '#FAFAFA',
            color: 'rgba(29, 33, 41, 0.45)',
            paddingLeft: 24
          }} showIcon={false} message={`已选择 ${selectedRowKeys.length} 项`} banner
            action={<Button type="link" size="small" onClick={() => {
              setSelectedRowKeys([])
              dispatch(setShowBtnTool(false))
            }}>取消选择</Button>}></Alert>}
          <Sheet columns={columns} dataSource={dataSource} page={page}  onChange={handlePage} rowKey='ID' rowSelection={rowSelection}></Sheet>
        </Card>
      </Space>
      {<BtnTool total={`已选择 ${selectedRowKeys.length} 项`} isShow={selectedRowKeys.length > 0} isSave={false} onDel={handleDel}></BtnTool>}
    </div>
  )
}